<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>热点</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
    <linK rel="stylesheet" href="../static/css/mainPage/mainPage.css" th:href="@{/css/mainPage/mainPage.css}">
    <linK rel="stylesheet" href="../static/css/nav/nav.css" th:href="@{/css/nav/nav.css}">
</head>

<body>
    <span class="alert"></span>
    <div class="top-bar-first" th:replace="layout/mainPage::topBarFirst"></div>
    <div class="top-bar-second" th:replace="fragments/top-bar-second::topBarSecond"></div>
    <div class="search" th:replace="layout/mainPage::searchBack"></div>
    <!-- 主内容与侧边栏 -->
    <div class="content">
        <div class="content-left">
            <div class="classify">
                <ul class="main-categories" th:replace="layout/mainPage::main-categories"></ul>
            </div>
            <div class="content-area">
                <div class="hot-content item active" data-category="hot">
                    <div class="news-contents" th:each="post:${posts}">
                        <div class="feed-card">
                            <span class="news-postId" style="display:none" th:text="${post.postId}"></span>
                            <span class="news-userId" style="display:none" th:text="${post.userId}"></span>
                            <a class="title" th:text="${post.title}"></a>
                            <div class="feed-card-bottom">
                                <span class="comments-num"><span th:text="${post.commentCount}"></span>评论</span>
                                <span class="post-date" th:text="${post.createdTime}"></span>
                            </div>
                        </div>
                        <div class="news-image" th:if="${post.coverImage}">
                            <a>
                                <img th:src="${post.coverImage}" alt="">
                            </a>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="content-right" th:replace="layout/mainPage::content-right"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../static/js/mainPage.js" th:src="@{/js/mainPage.js}"></script>

    <script th:inline="javascript">
        // 通过Thymeleaf表达式获取userInfo
        var userInfo = /*[[${userInfo}]]*/ null;
        console.log(userInfo);
        if (userInfo) {
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('isLoggedIn', 'true');
            console.log('用户信息已存储到LocalStorage');
        }
        // 通过Thymeleaf表达式获取posts
        // var posts = /*[[${posts}]]*/ null;
        // if (posts) {
        //     localStorage.setItem('posts', JSON.stringify(posts));
        //     console.log('posts已存储到LocalStorage');
        // }
        truncateTitles({ selector: '.title', maxLength: 30 });

    </script>
    <script src="../static/js/nav.js" th:src="@{/js/nav.js}"></script>

</body>

</html>